<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="../../common/css.html" title="数据菜单"/>
</head>
<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">开发环境</div>
                <div class="layui-card-body">
                    Menu 数据菜单对普通菜单的深度封装
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="/assets/component/pear/css/pear.css" />
 并
<script src="/assets/component/layui/layui.js"></script>
 并
<script src="/assets/component/pear/pear.js"></script>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">实例</div>
                <div class="layui-card-body">
                    <button id="collapse" class="pear-btn">隐藏</button>
                    <br/>
                    <br/>
                    <div id="sideMenu"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content layui-show">
                        <pre class="layui-code" lay-encode="true">
var sideMenu = menu.render({
    elem: 'sideMenu',
    async: true,
    theme: "light-theme",
    height: '300px',
    control: false,
    defaultMenu: 0,
    accordion: true,
    url: "/assets/data/menu.json",
    parseData: false,
    done: function() {
        layer.msg("加载完成")
    }
});

sideMenu.click(function(dom, data) {

    layer.msg("菜单点击 : " + JSON.stringify(data));
})
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 依 赖 脚 本 -->
    <:include file="../../common/js.html" />
    <script>
        layui.use(['layer', 'form',
            'element', 'menu', 'code','jquery'
        ], function() {
            var layer = layui.layer,
                menu = layui.menu,
                $ = layui.jquery,
                form = layui.form;

            layui.code({ encode: true  });

            var sideMenu = menu.render({
                elem: 'sideMenu',
                async: true,
                theme: "light-theme",
                height: '300px',
                control: false,
                defaultMenu: 0,
                accordion: true,
                url: "/assets/data/dataMenu.json",
                parseData: false,
                done: function() {
                    layer.msg("加载完成")
                }
            });

            sideMenu.click(function(dom, data) {
                layer.msg("菜单点击 : " + JSON.stringify(data));
            })

            $("#collapse").click(function(){
                sideMenu.collapse();
            })
        });
    </script>
</body>
</html>
